<!-- Announcement Banner -->
<div class="bg-gradient-to-r from-red-500 via-purple-400 to-blue-500">
  <div class="max-w-[85rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto">
    <!-- Grid -->
    <div class="grid justify-center md:grid-cols-2 md:justify-between md:items-center gap-2">
      <div class="text-center md:text-left">
        <p class="text-xs text-white/[.8] uppercase tracking-wider">Preview of Preline</p>
        <p class="mt-1 text-white font-medium">
          Sign up to get unlimited updates. No credit card required.
        </p>
      </div>
      <!-- End Col -->

      <div class="mt-3 text-center md:text-left md:flex md:justify-end md:items-center">
        <a
          class="
            py-3
            px-6
            inline-flex
            justify-center
            items-center
            gap-2
            rounded-full
            font-medium
            bg-white
            text-gray-700
            shadow-sm
            align-middle
            hover:bg-gray-50
            focus:outline-none
            focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600
            transition-all
            text-sm
          "
          href="#"
        >
          Sign up free
        </a>
      </div>
      <!-- End Col -->
    </div>
    <!-- End Grid -->
  </div>
</div>
<!-- End Announcement Banner -->
